<template>
	<div class="wrapper">
		<!-- v-bind="$attrs": 接受组件调用时候的所有属性 -->
		<input
			type="text"
			:value="value"
			@input="handleInput"
			v-if="type === 'text'"
			:class="{
				clearable: clearable,
			}"
			ref="input"
			v-bind="$attrs"
			v-on="events"
		/>
		<textarea
			cols="30"
			rows="4"
			:value="value"
			@input="handleInput"
			v-else
			v-bind="$attrs"
			v-on="events"
		></textarea>
		<!-- 字数的计算 -->
		<div v-if="limit && maxlength" class="limit">
			{{ value.length }}/{{ maxlength }}
		</div>
		<!-- 取消按钮 -->
		<span
			v-if="clearable && type == `text`"
			class="iconfont icondeleteclosecancel cancel"
			@click="handleCancel"
		></span>
	</div>
</template>

<script>
/**
 * 输入框组件的分析
 * 例子
 * el-input
 *      - props
 *          type | text / textarea | 默认text | <String>
 *          v-model
 *          maxlength | <Number> | 最大的字数
 *          limit | <Boolean> | 显示字数的统计
 *          clearable |  <Boolean> | 是否可以清空
 *              先保留
 *              valid | String | 表示验证的状态，通过、失败、普通
 *      - events
 */
export default {
	name: "hm-input",
	data() {
		return {
			events: {},
		};
	},
	props: {
		type: {
			type: String,
			default: "text",
		},
		value: String,
		limit: Boolean,
		maxlength: Number,
		clearable: Boolean,
	},
	mounted() {
		// 删除$listeners 的input事件
		delete this.$listeners.input;
		// 把除了input事件以外的所有事件赋值给event，events再给模板的von绑定
		this.events = this.$listeners;
	},
	methods: {
		handleInput(event) {
			// 输入框的值
			let value = event.target.value;
			// 判断如果需要限制文字的字数长度
			if (this.limit) {
				// 如果文字的长度大于maxlength
				if (value.length > this.maxlength) {
					// 截取前面部分的文字
					value = value.slice(0, this.maxlength);
				}
			}
			// input事件获取事件对象的value，把事件对象的value赋值给v-model绑定的值
			event.target.value = value;
			// 触发v-model传递的input事件
			this.$emit(`input`, value);
		},
		// 取消输入框的文字
		handleCancel() {
			// 清空输入框的内容
			this.$refs.input.value = "";
			// 清空v-mode绑定的值
			this.$emit(`input`, "");
		},
	},
};
</script>

<style scoped lang="less">
@import "./common/theme.less";
@import "//at.alicdn.com/t/font_2171348_w49egak1nzm.css";

.wrapper {
	display: inline-block;
	position: relative;

	.clearable {
		padding-right: 26px;
	}

	.cancel {
		position: absolute;
		right: 5px;
		top: 8px;
	}

	.limit {
		text-align: right;
		line-height: 1.8;
		font-size: 10px;
		color: #999;
	}

	input,
	textarea {
		width: 200px;
		border-radius: 4px;
		background: #fff;
		border: 1px #ccc solid;
		outline: none;
		box-sizing: border-box;
		padding: 5px 10px;

		&:focus {
			border: 1px @primary solid;
			box-shadow: 0 0 1px lighten(@primary, 35%);
		}
	}

	input {
		height: 32px;
	}

	textarea {
		width: auto;
	}
}
</style>